<template>
    <div>
        <el-dialog :title="row == undefined ? '新增存储地址' : '修改存储地址'" :visible.sync="deitOpen" width="60%"
            :before-close="closeDelDialog" :modal-append-to-body="false">

            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px" style="margin:20px 20px 0">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="数据节点名称" prop="name">
                            <el-input v-model="addForm.name" placeholder="请输入数据包名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="存储地址" prop="path">
                            <el-input v-model="addForm.path" placeholder="请输入选择存储地址"
                                @focus="onBlurAddressTap"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="大小(GB)" prop="size">
                            <el-input v-model="addForm.size" type="number" placeholder="请输入大小" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="addForm.remark" type="textarea" placeholder="请输入备注"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="排序" prop="orderNo">
                            <el-input v-model="addForm.orderNo" type="number" placeholder="请输入排序" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('addForm')">保 存</el-button>
                <el-button @click="closeDelDialog">取 消</el-button>
            </div>



        </el-dialog>

        <!--start 源地址 -->
        <deitAddress v-if="deitAddressOpen" :deitAddressOpen="deitAddressOpen" :istitle="addressTitle"
            @closeAddressDelDialog="closeAddressDelDialog" @deitAddressSubmit="deitAddressSubmit"></deitAddress>
        <!-- end 源地址 -->
    </div>
</template>
<script>
import deitAddress from "@/views/cqbc/backupRestore/filebackup/deitAddress.vue"
import { addPath,updatePath} from "@/api/cqbc/dataManage/yqDatamanageTree.js"
export default {
    archive_Dicts: ['BGQX'],
    watch: {
        row: {
            handler(val) {
                console.log(val,"sdklfjsdkl")
                if (val != undefined) { //修改
                    this.addForm=val;
                }
            },
            immediate: true
        }
    },
    props: ["deitOpen", "row","categoryId"],
    components: {
        deitAddress
    },
    data() {
        return {
            size: undefined,
            isStyle: false,
            addForm: {
                categoryId: undefined,
                name: undefined,
                path: undefined,
                remark: undefined,
                size: undefined,
                orderNo:undefined
            },
            rules: {
                name: [
                    { required: true, message: "请输入数据包名称", trigger: "blur" }
                ],

                path: [
                    { required: true, message: "请输入选择存储地址", trigger: "blur" }
                ],
                size: [
                    { required: true, message: "请输入大小", trigger: "blur" }
                ],
               

            },
            options: [],
            fileListData: [],
            textdetile: undefined,
            deitAddressOpen:false

        }
    },
    filters: {

    },
    created() {


    },
    methods: {

        //存储址弹窗
        onBlurAddressTap() {
            this.deitAddressOpen = true;
            this.addressTitle = "cudz"
        },
        //关闭原地址、备份地址弹窗
        closeAddressDelDialog() {
            this.deitAddressOpen = false;
        },
        //地址提交
        deitAddressSubmit(val) {
            var that = this;
            this.addForm['path'] = val.filePath
            this.$refs.addForm.clearValidate();
            this.deitAddressOpen = false;
        },
   
        changeType(val) {
            if (val != undefined) {
                if (val == "0") return "0B";
                var k = 1024;
                var sizes = ["B", "KB", "MB", "GB", "TB"];
                // console.log('Math.log(val)', Math.log(val));
                // console.log('Math.log(k)', Math.log(k));
                let i = Math.floor(Math.log(val) / Math.log(k));//得出该数字的单位应该是kB?MB
                let convertedVal = (val / Math.pow(k, i)).toPrecision(3);
                if (convertedVal.includes("e")) {
                    convertedVal = parseFloat(convertedVal).toFixed(0);
                }
                // console.log(i, convertedVal + sizes[i]);
                return convertedVal + sizes[i];
            }
        },
     
   
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },
        submitForm(addForm) {
            this.addForm.categoryId=this.categoryId;
            this.$refs[addForm].validate((valid) => {
                if (valid) {
                    if(this.row!=undefined){ //修改
                        updatePath(this.addForm).then(res=>{
                            if(res.code=='200'){
                        this.$modal.msgSuccess("修改成功");
                         this.$emit("addsubmitForm")
                        }
                        })
                    }else{
                        addPath(this.addForm).then(res=>{
                        if(res.code=='200'){
                        this.$modal.msgSuccess("添加成功");
                         this.$emit("addsubmitForm")
                        }
                    })
                    }
                   
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },


    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>

